<template>
  <div>
    <el-form
      v-model="employess"
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        padding: 20px;
        background-color: #fff;
      "
    >
      <div
        style="
          background-color: #fff;
          height: 30px;
          line-height: 30px;
          border-bottom: solid 1px #ccc;
          margin-bottom: 10px;
        "
      >
        修改
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="账号">
            <el-input
              v-model="employess.account"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input
              v-model="employess.password"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input
              v-model="employess.e_name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式">
            <el-input
              v-model="employess.contact_info"
              placeholder="请输入联系方式"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属部门:">
            <el-select v-model="employess.department_id" placeholder="请选择">
              <el-option
                v-for="item in marketOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务">
            <el-input
              v-model="employess.position"
              placeholder="请输入职务"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="底薪">
            <el-input
              v-model="employess.base_salary"
              placeholder="请输入底薪"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工生日">
            <el-input
            
              v-model="employess.birthday"
              placeholder="请输入员工生日"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入职时间">
            <el-date-picker
              v-model="employess.hire_date"
              type="date"
              placeholder="Pick a date"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色:">
            <el-select v-model="employess.role_id" placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="类型:">
            <el-radio-group v-model="employess.type">
              <el-radio :value="1">普通员工</el-radio>
              <el-radio :value="2">内销</el-radio>
              <el-radio :value="3">外销</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品参数支持:">
            <el-radio-group v-model="employess.isaudit">
              <el-radio :value="1">需要审核</el-radio>
              <el-radio :value="0">不需要审核</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="年度业绩目标">
            <el-input
              v-model="employess.annual_target"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="margin-top: 20px; text-align: center">
      <el-button type="primary" @click="save">提交</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref ,onBeforeMount} from "vue";
import { useRouter, useRoute } from "vue-router";
import { updateEmployess,getEmployessDetail } from "@/api/employess.js";
import { ElMessage } from "element-plus";

//路由选项
const router = useRouter();
//路由参数
const route = useRoute();
//员工id
let employee_id = route.query.employee_id;

// 部门选项
const marketOptions = [
  { value: "1", label: "市场部" },
  { value: "2", label: "销售部" },
  { value: "3", label: "财务部" }
];

//角色选项
const roleOptions = [
  { value: "1", label: "管理员" },
  { value: "2", label: "普通员工" }
];

//表单对象
const employess = ref({
  account: "",
  account_status: 0,
  annual_target: "",
  base_salary: 0,
  birthday: "",
  completed_performance: "",
  completion_rate: "",
  contact_info: "",
  department_id: 0,
  e_name: "",
  employee_id: 0,
  hire_date: "",
  isaudit: 0,
  position: "",
  password: "",
  role_id: 0,
  type: 1,
  isaudit: 1
});
//查询详情
async function queryDetai() {
  let res = await getEmployessDetail(employee_id);
  console.log(res.data);
  if (res.code == 200) {
    console.log(res.data);
    employess.value = res.data;
  }

}
//保存
async function save() {
  console.log(employess.value);
  //保存
  let res = await updateEmployess(employess.value);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    close();
  }
}
//取消
function close() {
  router.push("/employess/list");
}
//生命周期函数
onBeforeMount(() => {
  //获取参数console.log("route>>", route);
  console.log('employee_id:', employee_id);
  queryDetai();
  //根据id获取员工信息
});
</script>

<style scoped></style>
